<template>
  <div>
    <Header></Header>
    <div class="bj_content mui-content">
      <div class="p">
        <span v-html="html.createtime"></span>
        <span>浏览量：{{html.scan}}人</span>
        <span class="like" v-if="zan">
          <i :class="html.no" @click="like"></i>
          <span>{{html.collectnum}}人收藏</span>
        </span>
      </div>
      <!--富文本内容-->
      <div class="bd_xjxq" id="bd_xjxq" v-html="html.content"></div>
      <div class="bd_xjxq_input" v-show="menuItem&&menuItem.length == 0">
        <span class="bd_xjxq_input_title">请投最好的一位</span>
        <div class="bd_xjxq_input_xuan">
          <span
            :class="i==menuItem_index ? 'active':''"
            @tap="changeActive(i)"
            v-for="(item,i) in menuItem"
            :key="i"
          >{{item.name}}</span>
        </div>
        <button class="bd_xjxq_but" @tap="subbtn">提交</button>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "../../components/Header";
import config from "../../ajax/config";
export default {
  name: "art_detail",
  data() {
    return {
      html: "",
      zan: true,
      address: "",
      menuItem: [],
      menuItem_index: 0,
      checkedid: ""
    };
  },
  methods: {
    //跳转
    onderurl: function(url, val, type) {
      let that = this;
      if (type == 1) {
        that.$router.push({ path: url, query: { queryId: val } });
      } else {
        that.$router.push(url);
      }
    },
    changeActive: function(i) {
      this.menuItem_index = i;
      this.checkedid = this.menuItem[i].id;
    },
    //收藏
    like: function() {
      let that = this;
      that.$axios
        .post("api/article/modelCollect", {
          uid: this.$store.state.account.user_info.uid,
          type: that.html.types,
          vid: that.html.id,
          sqid: that.address.sqid
        })
        .then(res => {
          if (res == 1) {
            that.html.no = "mui-icon-extra mui-icon-extra-heart-filled";
            that.html.collectnum = that.html.collectnum + 1;
            mui.toast("收藏成功", { duration: "long", type: "div" });
          } else {
            that.html.no = "mui-icon-extra mui-icon-extra-heart";
            that.html.collectnum = that.html.collectnum - 1;
            mui.toast("取消收藏", { duration: "long", type: "div" });
          }
        });
    },
    select_city: function(o, j) {
      let that = this;
      that.$axios
        .get("address/addressList", { params: { uid: 3 } })
        .then(res => {
          console.log(res);
          return false;
          that.now_areas = res;
        });
    },
    subbtn: function() {
      //console.log(user)
      if (!this.$store.state.account.user_info.uid) {
        mui.toast("未登录，请先登录");
      } else {
        if (!this.checkedid) {
          mui.toast("请选择投票");
        } else {
          mui.post(
            config.url + "api/system/voteing",
            {
              uid: this.$store.state.account.user_info.uid,
              vcid: this.checkedid,
              msgid: this.html.id,
              type: 0
            },
            function(data) {
              var json = JSON.parse(data);
              if (json.code == 0) {
                mui.toast("已参加过投票");
              } else {
                mui.toast("投票成功");
              }
              console.log(json);
            },
            "json"
          );
        }
      }
    }
  },
  mounted() {
    let that = this;
    that.address = this.$store.state.account.community; //缓存获取社区
    //社区公告				this.$route.query.queryId
    that.$axios
      .post("api/system/detailModel", {
        id: that.$route.query.id,
        type: that.$route.query.type || 0,
        uid: this.$store.state.account.user_info.uid,
        types: that.$route.query.types || 0
      })
      .then(res => {
        console.log(123);
        console.log(res);
        if (res.sss.status == 0) {
          res.sss.no = "mui-icon-extra mui-icon-extra-heart";
        } else {
          res.sss.no = "mui-icon-extra mui-icon-extra-heart-filled";
        }
        // that.zan = res.sss.collectnum?true:false
        var list = [];
        if (res.sss.vote) {
          for (var i = 0; i < res.sss.vote.length; i++) {
            list.push({
              name: res.sss.vote[i].name,
              id: res.sss.vote[i].id,
              checked: ""
            });
          }
        }

        that.menuItem = list;
        that.html = res.sss;

        that.menuItem = res.sss.vote;
        that.$store.commit("change_header", {
          header_text: that.html.name,
          header_right_func: true,
          header_right_html: "",
          header_back_btn: true
        });
        //that.shequgonggao = res.data[0];
      });
  },
  components: {
    Header
  }
};
</script>
<style lang="less" scoped>
@import "../../../static/pxvalue.less";
@import "../../assets/less/index/details.less";
.bd_xjxq_input_xuan {
  span {
    color: #8f8f94;
    padding: 0.1rem 0.2rem;
    border-radius: 0.1rem;
    margin: 0 0.3rem 0.3rem 0;
    display: inline-block;
    border: 1px solid #8f8f94;
    font-size: 0.6rem;
  }
}
img {
  width: 100% !important;
}
#bd_xjxq {
  img {
    width: 100% !important;
  }
}
</style>
